import React, { useEffect, useState } from 'react';
import { Inventory_list } from '../../../utils/api/index';
import '../../../styles/Realdata.scss'
// 导入图表：
import * as echarts from 'echarts'; 



type EChartsOption = echarts.EChartsOption;




// 用interface声明对象类型
interface Props {
    myChart1:any,
    getElementById:HTMLElement;
}


function Chart(props:Props) {

    var myChart1;

useEffect(()=>{
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        title: {
            text: '销售业绩汇总表',
            subtext: '本月业绩汇总'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['本月出库数量', '每月回款总额']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '本月出库数量',
                type: 'bar',
                data: [
                    40321, 46345, 37456, 48456, 45467, 39346, 38987, 43576, 72987, 58342, 85987,123998
                ],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            },
            {
                name: '每月回款总额',
                type: 'bar',
                data: [
                    453278, 483678, 322389, 520234, 473450, 497863, 496754, 479087, 528765, 598765, 653472, 835645
                ],
                markPoint: {
                    data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            }
        

        ]
    };
    option && myChart.setOption(option);




})

    return (
        <div className='chart'>
            <h2>实时数据</h2>
            <div className='box'>
                <div className='box4'>
                    <div className='box3'>
                        <p>今日盘点数量</p >
                        <p className='box1'>20</p >
                    </div>
                    {/* <p className='box2'>当前订单数 0</p > */}
                </div>
                <div className='box4'>
                    <div className='box3'>
                        <p>今日出库数量</p >
                        <p className='box1'>10</p >
                    </div>
                    {/* <p className='box2'>今日排队总数 0</p > */}
                </div>
                <div className='box4'>
                    <div className='box3'>
                        <p>今日订单数</p >
                        <p className='box1'>5</p >
                    </div>
                    {/* <p className='box2'>今日平均响应时长 0s</p > */}
                </div>
                <div className='box4'>
                    <div className='box3'>
                        <p>今日回款额</p >
                        <p className='box1'>28567元</p >
                    </div>
                    {/* <p className='box2'>实际接入率 0%</p > */}
                </div>
                <div className='box4'>
                    <div className='box3'>
                        <p>本月回款总额</p >
                        <p className='box1'>325800元</p >
                    </div>
                    {/* <p className='box2'>今日参评率 0%</p > */}
                </div>

            </div>
            <div id="container" style={{ width: 500, height: 300 }}>
                {/* <h2>今日在线服务数据趋势</h2> */}
                <div className='h2'> <h2>柱状图</h2></div>
                <div id={'main'} style={{height:400}} className="charts1">

               </div>
        
            </div>
        </div>
    );
}

export default Chart;